<template>
    <div class="grid grid-cols-4 gap-4">
        <div class="box p-4">
            <h6 class="mb-2">课程数量</h6>
            <h3 class="">12</h3>
        </div>
        <div class="box p-4">
            <h6 class="mb-2">班级数量</h6>
            <h3 class="" v-counter="courseNum"></h3>
        </div>

        <div class="box p-4">
            <h6 class="mb-2">学生数量</h6>
            <h3 class="" v-counter="studentNum"></h3>
            <!-- <p>Rating this month</p> -->
        </div>

        <div class="box p-4">
            <h6 class="mb-2">已授课时</h6>
            <h3 class="">22</h3>
            <!-- <p>Rating this month</p> -->
        </div>
    </div>

    <AppCard title="订单">
        <div>
            订单列表
        </div>
    </AppCard>

    <AppCard title="Earnings">
        <div>
            学生列表
        </div>
    </AppCard>
    <AppCard title="Best Selling Courses">
        <div>
            <table class="table table-nowrap mb-0">
                <thead>
                    <tr>
                        <th>COURSES</th>
                        <th>SALES</th>
                        <th>AMOUNT</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <div class="sell-table-group d-flex align-items-center">
                                <div class="sell-group-img">
                                    <a href="course-details.html">
                                        <img style="width: 200px;" src="../../assets/img/course/course-10.jpg"
                                            class="img-fluid " alt="">
                                    </a>
                                </div>
                                <div class="sell-tabel-info">

                                    <p><a href="course-details.html">Information
                                            About UI/UX Design Degree</a></p>
                                </div>
                            </div>
                        </td>
                        <td>34</td>
                        <td>$3,145.23</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </AppCard>
</template>

<script setup>
const studentNum = ref(20)
const courseNum = ref(15)
onMounted(() => {
    setTimeout(() => {
        studentNum.value = 1000
        courseNum.value = 1308
    }, 5000)

})
</script>